<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      html, body {
          scroll-behavior: smooth;
      }

      body {
          margin: 0;
          padding: 0;
          transition: --scroll-position-delayed 0.15s linear;
          --scroll-velocity: calc(var(--scroll-position) - var(--scroll-position-delayed));
          --scroll-dynamic: calc(var(--scroll-velocity) / var(--scroll-velocity));
      }

      .debug {
          position: fixed;
          padding: 15px;
          width: 300px;
          background-color: #ffffff;
          border: 1px solid royalblue;
          font-size: 1rem;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          counter-reset: scroll-position calc(var(--scroll-position) * 1) scroll-position-delayed calc(var(--scroll-position-delayed) * 1) scroll-velocity calc(var(--scroll-velocity) * 1);
      }

      [data-id="--scroll-position"]::after {
          content: "--scroll-position: " counter(scroll-position);
      }

      [data-id="--scroll-position-delayed"]::after {
          content: "--scroll-position-delayed: " counter(scroll-position-delayed);
      }

      [data-id="--scroll-velocity"]::after {
          content: "--scroll-velocity: " counter(scroll-velocity);
      }

      @property --scroll-position {
          syntax: "<number>";
          inherits: true;
          initial-value: 0;
      }

      @property --scroll-position-delayed {
          syntax: "<number>";
          inherits: true;
          initial-value: 0;
      }

      @property --scroll-velocity {
          syntax: "<number>";
          inherits: true;
          initial-value: 0;
      }

      @keyframes adjust-pos {
          to {
              --scroll-position: 100;
              --scroll-position-delayed: 100;
          }
      }

      :root {
          animation: adjust-pos 3s linear;
          animation-timeline: scroll();
      }

      .back {
          position: fixed;
          right: 10px;
          bottom: 10px;
          background-color: royalblue;
          border-radius: 8px;
          width: 60px;
          height: 60px;
          transform: translateX(calc(var(--scroll-dynamic) * 100%));
          transition: .2s;
      }
  </style>
</head>
<body>
<div style="height: 2000px"></div>
<a href="#" class="back"></a>
<div class="debug">
  <div data-id="--scroll-position"></div>
  <div data-id="--scroll-position-delayed"></div>
  <div data-id="--scroll-velocity"></div>
</div>
</body>
</html>
